<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <!-- 左侧导航栏 -->
        <nav class="col-md-2 d-none d-md-block bg-light sidebar">
            <div class="position-sticky">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="#" id="nav-statistics" data-page="statistics">统计管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" id="nav-backup" data-page="backup">备份管理</a>
                    </li>
<!--                    <li class="nav-item"> 邮件管理暂不开放-->
<!--                        <a class="nav-link" href="#" id="nav-email" data-page="email">邮件管理</a>-->
<!--                    </li>-->
                    <li class="nav-item">
                        <a class="nav-link" href="#" id="nav-clean" data-page="clean">文件清理管理</a>
                    </li>
                </ul>
            </div>
        </nav>

        <!-- 右侧内容区域 -->
        <main class="col-md-10 ms-sm-auto col-lg-10 px-md-4">
            <div id="content-area">
                <!-- 默认显示统计管理页面 -->
            </div>
        </main>
    </div>
</div>

<script>
    // 默认加载统计管理页面
    $(document).ready(() => {
        loadPage("statistics");
    });

    // 点击导航栏加载对应页面
    $(".nav-link").on("click", function (e) {
        e.preventDefault();

        // 移除其他导航项的激活状态
        $(".nav-link").removeClass("active");
        $(this).addClass("active");

        // 获取目标页面的路径
        const page = $(this).data("page");
        loadPage(page);
    });

    // 加载指定页面到内容区域
    function loadPage(page) {
        if (page) {
            $("#content-area").load(page);
        }
    }
</script>
</body>
</html>
